<template>
	<div class="map4">
		
	</div>
</template>

<script>
	export default{
		mounted(){
			this.Dynamic()
		},
		methods:{
			Dynamic(){
				var Dynamic=this.$echarts.init(document.querySelector('.map4'));
				 var years = ['2018', '2019', '2020'];
				 var jdData = [
				     ['山东', '香港', '北京', '上海', '广州', '深圳', '杭州'],
				     ['山东', '香港', '北京', '上海', '广州', '深圳', '杭州'],
				     ['山东', '香港', '北京', '上海', '广州', '深圳', '杭州']
				 ]
				 var data = [
				     [2228, 13211, 13263, 9284, 4138, 2237, 4779],
				     [15526, 15331, 15668, 10331, 41580, 1909],
				     [14223, 14531, 2153, 10873, 44964, 29566 ],
				 ];
				
				 var optionDynamic = {
				
				     baseOption: {
				         backgroundColor: "rgba(0,0,0,.2)",  //背景颜色
				         timeline: {
				             data: years,
							 show:false,
				             axisType: 'category',
				             autoPlay: true,
				             playInterval: 2000, //播放速度
				             //  height: null,
				             label: {
				                 normal: {
				                     textStyle: {
				
				                         color: 'red',
				                     }
				                 },
				                 emphasis: {
				                     textStyle: {
				                         color: 'red'
				                     }
				                 }
				             },
				             symbolSize: 10,
				             lineStyle: {
				                 color: '#red'
				             },
				             checkpointStyle: {
				                 borderColor: '#red',
				                 borderWidth: 2
				             },
				             controlStyle: {
				                 showNextBtn: true,
				                 showPrevBtn: true,
				                 normal: {
				                     color: '#ff8800',
				                     borderColor: '#ff8800'
				                 },
				                 emphasis: {
				                     color: 'red',
				                     borderColor: 'red'
				                 }
				             },
				
				         },
				         title: {
				             text: '',
				             right: '2%',
				             bottom: '15%',
				             textStyle: {
				                 fontSize: 14,
				                 color: '#fff' //标题字体颜色
				             }
				         },
				         tooltip: {
				             'trigger': 'axis'
				         },
				         calculable: true,
				         grid: {
				             left: '8%',
				             right: '2%',
				             bottom: '6%',
				             top: '0%',
				             containLabel: true
				         },
				         label: {
				             normal: {
				                 textStyle: {
				                     color: 'red'
				                 }
				             }
				         },
				         yAxis: [{
				
				             nameGap: 50,
				             offset: '37',
				             'type': 'category',
				             interval: 50,
				             //inverse: ture,//图表倒叙或者正序排版
				             data: '',
				             nameTextStyle: {
				                 color: 'red'
				             },
				
				
				             axisLabel: {
				                 //rotate:45,
				                 show: false,
				                 textStyle: {
				                     fontSize: 32,
				
				                     color: function(params, Index) { // 标签国家字体颜色
				
				                         //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);//随机生成颜色
				
				                         var colorarrays = ['#6bc0fb', '#7fec9d', '#fedd8b', '#ffa597', '#84e4dd', '#749f83',
				                             '#ca8622', '#bda29a', '#a8d8ea', '#aa96da', '#fcbad3', '#ffffd2',
				                             '#f38181', '#fce38a', '#eaffd0', '#95e1d3', '#e3fdfd', '#749f83', '#ca8622'
				                         ];
				
				                         //console.log("111", Index, colorarrays[Index],params); //打印序列
				
				                         return colorarrays[jdData[0].indexOf(params)];
				                     },
				
				
				                 }, //rotate:45,
				                 interval: 50
				             },
				             axisLine: {
				
				                 lineStyle: {
				                     color: 'balck' //Y轴颜色
				                 },
				             },
				             splitLine: {
				                 show: false,
				                 lineStyle: {
				                     color: 'balck'
				                 }
				             },
				
				         }],
				         xAxis: [{
				             'type': 'value',
				             'name': '',
				
				             splitNumber: 8, //轴线个数
				             nameTextStyle: {
				                 color: 'balck'
				             },
				             axisLine: {
				                 lineStyle: {
				                     color: '#ffa597' //X轴颜色
				                 }
				             },
				             axisLabel: {
				                 formatter: '{value} '
				             },
				             splitLine: {
				                 show: true,
				                 lineStyle: {
				                     color: '#fedd8b'
				                 }
				             },
				         }],
				         series: [{
				                 'name': '',
				                 'type': 'bar',
				                 markLine: {
				                     label: {
				                         normal: {
				                             show: false
				                         }
				                     },
				                     lineStyle: {
				                         normal: {
				                             color: 'red',
				                             width: 3
				                         }
				                     },
				                 },
				                 label: {
				                     normal: {
				                         show: true,
				                         position: 'right', //数值显示在右侧
				                         formatter: '{c}'
				                     }
				                 },
				                 itemStyle: {
				                     normal: {
				                         color: function(params) {
				                             // build a color map as your need.
				                             //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);//随机生成颜色         
				                             var colorList = ['#6bc0fb', '#7fec9d', '#fedd8b', '#ffa597', '#84e4dd', '#749f83',
				                                 '#ca8622', '#bda29a', '#a8d8ea', '#aa96da', '#fcbad3', '#ffffd2',
				                                 '#f38181', '#fce38a', '#eaffd0', '#95e1d3', '#e3fdfd', '#749f83', '#ca8622'
				                             ];
				                             // return colorList[params.dataIndex]
				
				                             // console.log("111", params.name); //打印序列
				                             return colorList[jdData[0].indexOf(params.name)];
				                         },
				
				                     }
				                 },
				             },
				
				             {
				                 'name': '',
				                 'type': 'bar',
				                 markLine: {
				                     
				                     
				                     label: {
				                         normal: {
				                             show: false
				                         }
				                     },
				                     lineStyle: {
				                         
				                         normal: {
				                             color: 'red',
				                             width: 3
				                         }
				                     },
				                 },
				                 barWidth: '50%',
				                 barGap: '-100%',
				                 label: {
				                     normal: {
				                         show: true,
				                         fontSize: 16,  //标签国家字体大小
				                         position: 'left', //数值显示在右侧
				                         formatter: function(p) {
				                             return p.name;
				                         }
				                     }
				                 },
				                 itemStyle: {
				                     normal: {
				                         
				                         
				                         color: function(params) {
				                             // build a color map as your need.
				                             //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);//随机生成颜色         
				                             var colorList = ['#6bc0fb', '#7fec9d', '#fedd8b', '#ffa597', '#84e4dd', '#749f83',
				                                 '#ca8622', '#bda29a', '#a8d8ea', '#aa96da', '#fcbad3', '#ffffd2',
				                                 '#f38181', '#fce38a', '#eaffd0', '#95e1d3', '#e3fdfd', '#749f83', '#ca8622'
				                             ];
				                             // return colorList[params.dataIndex]
				
				                             // console.log("111", params.name); //打印序列
				                             return colorList[jdData[0].indexOf(params.name)];
				                         },
				
				                     }
				                 },
				             }
				         ],
				
				         animationEasingUpdate: 'quinticInOut',
				         animationDurationUpdate: 1500, //动画效果
				     },
				
				     options: []
				 };
				 for (var n = 0; n < years.length; n++) {
				
				     var res = [];
				     //alert(jdData.length);
				     for (var j = 0; j < data[n].length; j++) {
				         res.push({
				             name: jdData[n][j],
				             value: data[n][j]
				         });
				
				     }
				
				     res.sort(function(a, b) {
				         return b.value - a.value;
				     }).slice(0, 6);
				
				     res.sort(function(a, b) {
				         return a.value - b.value;
				     });
				
				
				     var res1 = [];
				     var res2 = [];
				     //console.log(res);
				     for (var t = 0; t < res.length; t++) {
				         res1[t] = res[t].name;
				         res2[t] = res[t].value;
				     }
				     optionDynamic.options.push({
				         title: {
				             text: years[n] + '年'
				         },
				         yAxis: {
				             data: res1,
				         },
				         series: [{
				             data: res2
				         }, {
				             data: res2
				         }]
				     });
				 }
				 Dynamic.setOption(optionDynamic)
				 window.addEventListener('resize',function(){
				 	Dynamic.resize()
				 })
			}
		}
	}
</script>

<style>
</style>
